<!DOCTYPE html>
<html lang="en">
<script>
  console.time()
</script>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- bootstrap5 -->
  <link rel="stylesheet" href="../public/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">
  <script src="../public/bootstrap-5.3.0-alpha1-dist/js/bootstrap.bundle.min.js"></script>
  <!-- wow -->
  <link rel="stylesheet" href="../public/wow/animatePlus.css">
  <script type="text/javascript" src="../public/wow/wow.min.js"></script>
  <script type="text/javascript">
    new WOW().init();
  </script>
  <!-- 百度地图 -->
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=PjakgD5A87iuwAWYsdVQ0HKQVBQ8znPs"></script>
  <!-- less4 -->
  <link rel="stylesheet/less" href="./less/index.less">
  <script src="../public/less/less.js"></script>
  <script src="./js/index.js"></script>
  <title>ergo</title>
</head>
<body>
  <header class="position-sticky top-0 bg-white position-fixed top-0 z-1">
    <nav class="navbar navbar-expand-lg">
      <div class="container-fluid">
        <div class="row w-100 justify-content-between">
          <div class="col-3 d-flex align-items-center">
            <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <img src="./img/line.png" alt="" id="line">
          </div>
          <div class="col-6 col-sm-4 d-flex align-items-center">
            <a class="navbar-brand" href="#" id="logo"><img src="./img/logo.png" alt="" class="w-100"></a>
            <div id="searchInput" class="d-none wow animate__slideInRight d-flex w-100">
              <input type="search" placeholder="请输入关键字" class="">
              <div class="float-end cursorPointer"></div>
            </div>
          </div>
          <div class="col-3 d-flex align-items-center justify-content-end">
            <img src="./img/line.png" alt="" id="line2" class="">
            <div class="navbar-brand float-end ps-3 pt-2"><img src="./img/search.png" alt="" id="search" class="cursorPointer"></div>
          </div>
          <div class="collapse navbar-collapse float-lg-start pt-1 me-1" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0 fs-4">
              <li class="nav-item">
                <a class="nav-link active px-2" aria-current="page" href="#">首页</a>
              </li>
              <li class="nav-item">
                <a class="nav-link px-2" href="#">关于我们</a>
              </li>
              <li class="nav-item">
                <a class="nav-link px-2" href="#">风险评估</a>
              </li>
              <li class="nav-item">
                <a class="nav-link px-2" href="#">专业咨询</a>
              </li>
              <li class="nav-item">
                <a class="nav-link px-2" href="#">专业培训</a>
              </li>
              <li class="nav-item">
                <a class="nav-link px-2" href="#">人体工学资源</a>
              </li>
              <li class="nav-item">
                <a class="nav-link px-2" href="#">会员中心</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </nav>
  </header>
  <div id="banner">
    <div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="./img/banner.png" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
          <img src="./img/banner.png" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
          <img src="./img/banner.png" class="d-block w-100" alt="...">
        </div>
      </div>
    </div>
  </div>
  <!-- riskAssessment风险评估 -->
  <div id="riskAssessment" class="py-2">
    <div class="row w-100 my-3 text-center">
      <div class="col-4 pt-3">
        <div class="w-100 bg-dark-subtle line3"></div>
      </div>
      <div class="col-4 fs-3 color1c91dd">风险评估</div>
      <div class="col-4 pt-3">
        <div class="w-100 bg-dark-subtle line3"></div>
      </div>
    </div>
    <div class="row mt-sm-4 text-center w-100">
      <div class="col-1 col-sm-2"></div>
      <div class="col-10 col-sm-8">
        <div class="row justify-content-between fs-4">
          <div class="col-3 wow animate__slideInLeft" data-wow-offset="400">
            <img src="./img/办公室.png" alt="" class="d-block w-100">
            <p class="mt-2">办公室</p>
          </div>
          <div class="col-3 wow animate__slideInUp" data-wow-offset="400">
            <img src="./img/工业.png" alt="" class="d-block w-100">
            <p class="mt-2">工业</p>
          </div>
          <div class="col-3 wow animate__slideInDown" data-wow-offset="400">
            <img src="./img/个人.png" alt="" class="d-block w-100">
            <p class="mt-2">个人/家居</p>
          </div>
          <div class="col-3 wow animate__slideInRight" data-wow-offset="400">
            <img src="./img/其他行业.png" alt="" class="d-block w-100">
            <p class="mt-2">其他行业</p>
          </div>
        </div>
      </div>
      <div class="col-1 col-sm-2"></div>
    </div>
    <div class="row g-0">
      <div class="col-6 col-sm-4 wow animate__fadeInRight" data-wow-offset="200">
        <img src="./img/专业咨询.png" alt="" class="d-block w-100">
      </div>
      <div class="col-6 p-4 bg-body-tertiary col-sm-4 wow animate__fadeInRight" data-wow-offset="200">
        <p class="fs-2">专业咨询</p>
        <p class="text-body-secondary">个人咨询</p>
        <p class="text-body-secondary">企业咨询</p>
      </div>
      <div class="col-6 col-sm-4 wow animate__fadeInRight" data-wow-offset="200">
        <img src="./img/专业培训.png" alt="" class="d-block w-100">
      </div>
      <div class="col-6 p-4 bg-body-tertiary col-sm-4 wow animate__fadeInRight" data-wow-offset="200">
        <p class="fs-2">专业培训</p>
        <p class="text-body-secondary">培训通知</p>
        <p class="text-body-secondary">在线培训</p>
        <p class="text-body-secondary">现场培训</p>
      </div>
      <div class="col-6 col-sm-4 wow animate__fadeInRight" data-wow-offset="200">
        <img src="./img/人体工学资源.png" alt="" class="d-block w-100">
      </div>
      <div class="col-6 p-4 bg-body-tertiary col-sm-4 wow animate__fadeInRight" data-wow-offset="200">
        <p class="fs-2">人体工学资源</p>
        <p class="text-body-secondary">案例分析</p>
        <p class="text-body-secondary">企业广告</p>
        <p class="text-body-secondary">产品推荐</p>
      </div>
    </div>
  </div>
  <!-- ergonomics人体工学 -->
  <div id="ergonomics" class="py-2">
    <div class="row w-100 my-3 text-center">
      <div class="col-3 pt-3">
        <div class="w-100 bg-dark-subtle line3"></div>
      </div>
      <div class="col-6 fs-3 color1c91dd">人体工学介绍和应用</div>
      <div class="col-3 pt-3">
        <div class="w-100 bg-dark-subtle line3"></div>
      </div>
    </div>
    <div class="position-relative overflow-hidden mb-3" id="hov">
      <img src="./img/人体工学介绍和应用.png" alt="" class="w-100">
      <div class="col-5 position-absolute top-0 text-light h-100 p-4" id="introduction">
        <p class="fs-2 text-center">人体工学介绍</p>
        <div class="row fs-3 g-3 mx-sm-2 mx-md-3">
          <div class="col-6"><button type="button" class="btn btn-outline-light w-100 py-2">历史</button></div>
          <div class="col-6"><button type="button" class="btn btn-outline-light w-100 py-2">现在</button></div>
          <div class="col-6"><button type="button" class="btn btn-outline-light w-100 py-2">将来</button></div>
        </div>
      </div>
    </div>
    <div class="row text-light text-center g-2 w-100">
      <div class="col-12 col-sm-6 wow animate__backInLeft" data-wow-offset="200">
        <div class="bg1c91dd d-flex align-items-center justify-content-center h-100 cursorPointer">
          <img src="./img/职业应用.png" alt="" class="h-50 float-start me-3">
          <p class="fs-1 float-start mb-0">职业应用</p>
        </div>
      </div>
      <div class="col-12 col-sm-6 wow animate__backInRight" data-wow-offset="200">
        <div class="bg006db2 d-flex align-items-center justify-content-center h-100 cursorPointer">
          <img src="./img/家居应用.png" alt="" class="h-50 float-start me-3">
          <p class="fs-1 float-start mb-0">个人/家居应用</p>
        </div>
      </div>
      <div class="col-12 wow animate__backInUp" data-wow-offset="300">
        <div class="bg-secondary d-flex align-items-center justify-content-center h-100 p-4 cursorPointer">
          <img src="./img/其他应用.png" alt="" class="h-50 float-start me-3">
          <p class="fs-1 float-start mb-0">其他应用</p>
        </div>
      </div>
    </div>
  </div>
  <!-- contact联系 -->
  <div id="contact" class="py-2">
    <div class="row w-100 my-3 text-center">
      <div class="col-4 pt-3">
        <div class="w-100 bg-dark-subtle line3"></div>
      </div>
      <div class="col-4 fs-3 color1c91dd">联系我们</div>
      <div class="col-4 pt-3">
        <div class="w-100 bg-dark-subtle line3"></div>
      </div>
    </div>
    <div class="row mt-sm-4 text-center w-100 px-3 g-3">
      <div class="col-12 col-sm-6 d-flex align-items-center">
        <img src="./img/tel.png" alt="" class="d-block w3 me-3">
        <p class="mb-0 fs-3">+86 15217196291</p>
      </div>
      <div class="col-12 col-sm-6 d-flex align-items-center">
        <img src="./img/fax.png" alt="" class="d-block w3 me-3">
        <p class="mb-0 fs-3">01-706-500-3604</p>
      </div>
      <div class="col-12 col-sm-6 d-flex align-items-center">
        <img src="./img/email.png" alt="" class="d-block w3 me-3">
        <p class="mb-0 fs-3">ergo168@qq.com</p>
      </div>
      <div class="col-12 d-flex align-items-center">
        <img src="./img/location.png" alt="" class="d-block w3 me-3">
        <p class="mb-0 fs-3">广州市天河区珠江新城江西路高德置地D座15楼</p>
      </div>
    </div>
    <div class="w-100 my-2" id="map"></div>
    <script>
      const map = new BMapGL.Map("map");          // 创建地图实例 
      const point = new BMapGL.Point(113.32126, 23.10245);  // 创建点坐标 
      map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别
      map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
      map.setHeading(64.5);   //设置地图旋转角度
      map.setTilt(73);       //设置地图的倾斜角度
      // 禁止地图旋转和倾斜可以通过配置项进行设置
      // var map = new BMapGL.Map("allmap",{
      //   enableRotate: false,
      //   enableTilt: false
      // });
    </script>
  </div>
  <footer class="bg-body-tertiary position-sticky bottom-0">
    <ul class="list-unstyled d-flex text-center fs-3 mb-0 cursorPointer">
      <li class="bg-primary w-25 pt-4">
        <img src="./img/首页.png" alt="">
        <p class="text-light">首页</p>
      </li>
      <li class="w-25 pt-4">
        <img src="./img/关于我们.png" alt="">
        <p>关于我们</p>
      </li>
      <li class="w-25 pt-4">
        <img src="./img/风险评估.png" alt="">
        <p>风险评估</p>
      </li>
      <li class="w-25 pt-4">
        <img src="./img/用户中心.png" alt="">
        <p>用户中心</p>
      </li>
    </ul>
  </footer>
</body>
</html>
<script>
  console.timeEnd()
</script>